<template>
	<view style="height: 100vh;" :style="{'background-color' : backgroundColor}">
		<view id="main">
			<uni-card id="logon-pane">
				<uni-forms id="logon-form" ref="logonForm" :rules="logonRules">
					<uni-forms-item>
						<uni-easyinput placeholder="昵称" type="text" v-model="logonData.account" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput placeholder="密码" type="password" v-model="logonData.password" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput placeholder="确认密码" type="password" v-model="logonData.confirmPassword" />
					</uni-forms-item>

					<view class="logon-button">
						<u-button class="logon-button" :style="{'background-color': navButtonColor}"
							@click="doRegister()">注册</u-button>
					</view>

					<view>
						<navigator url="/pages/index/index">返回主页</navigator>
					</view>
				</uni-forms>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		register
	} from '@/api/user/index.js'

	export default {
		name: "logon",
		data() {
			return {
				confirmDirty: false,
				logonData: {
					account: '',
					password: '',
					confirmPassword: '',
				},
				logonRules: {
					account: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请确认密码',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value != this.logonData.password) {
									callback('二次密码啊不一致')
								}
								return true
							}
						}]
					},
				},
				backgroundColor: '',
				navButtonColor: ''
			}
		},
		onReady() {
			this.backgroundColor = uni.getStorageSync('backgroundColor')
			this.navButtonColor = uni.getStorageSync('navButtonColor')
			this.$refs.logonForm.setRules(this.logonRules)
		},
		methods: {
			doRegister() {
				register({
					username: this.logonData.account,
					password: this.logonData.password
				}).then(res => {
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					
					uni.navigateBack({
						
					})
				})
			},
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if (value && value !== form.getFieldValue('password')) {
					callback('两次密码不一致');
				} else {
					callback();
				}
			},
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if (value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
			logon(e) {},
			toIndex() {
				uni.navigateTo({
					url: "/index/index"
				})
			}
		},
		beforeCreate() {

		},
	}
</script>

<style>
	page {
		background-color: #2E62CD;
	}

	navigator {
		color: #fff;
	}

	#main {
		padding: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#logon-pane {
		border: none;
		margin-top: 200rpx;
		width: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: rgba(224, 243, 248, 0.1);
		border-radius: 5rpx;
	}

	#logon-form {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 500rpx;
	}

	.logon-button {
		width: 200rpx;
		margin: 0rpx auto;
	}
</style>
